<template>
  <div style="width: 100%;margin-top: 12px">
    <el-form label-suffix label-position="left" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="手机号" prop="phone" label-width="70px">
        <el-input v-model="ruleForm.phone" maxlength="11" placeholder="请输入手机号" />
      </el-form-item>
      <el-form-item label="验证码" prop="code" label-width="70px">
        <el-input v-model="ruleForm.code" maxlength="6" placeholder="请输入验证码" />
        <div class="item-code-text" v-if="countdown === 60" @click="handleSms()">获取验证码</div>
        <div class="item-code-text" v-else> {{ countdown > 0 ? `${countdown} 秒后重新获取` : '获取验证码' }}</div>
      </el-form-item>
      <div class="button">
        <!-- <el-button type="warning" @click="submitForm('ruleForm')">登录</el-button> -->
        <div @click="submitForm('ruleForm')">登录</div>
      </div>
    </el-form>

    <el-dialog
      title="图形验证码"
      append-to-body
      :visible.sync="dialogVisible"
      :width="dialogWidth"
      :lock-scroll="false"
      :before-close="handleClose"
      style="z-index: 2005;"
    >
      <div class="item-code">
        <el-input maxlength="6" v-model="code" placeholder="请输入图形验证码"></el-input>
        <img class="codeImg" v-lazy="codeImg" alt="" @click="getCode()">
      </div>
      <div style="text-align: center;margin-top: 20px;">
        <el-button type="primary" @click="submitSMS()">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { sendSMS, getCode, registrations } from '@/api/login'
export default {
  name: "Phone",
  props: {
    dialogWidth: {
      type: String,
      default: '30%'
    }
  },
  created() {},
  data() {
    return {
      // 图形验证码弹窗
      dialogVisible: false,
      // 图形验证码
      codeImg: '',
      // 图形验证码
      code: '',
      // uuid
      uuid: '',
      countdown: 60, // 设定初始倒计时时间
      // 手机号-验证码
      ruleForm: {
        phone: '',
        code: '',
      },
      // rule
      rules: {
        phone: [
          { required: true, message: '请输入手机号', trigger: ["blur","change"]},
          { pattern:/^1[3456789]\d{9}$/, message: "请输入正确的手机号", trigger: ["blur","change"] }
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: ["blur","change"] },
        ],
      }
    };
  },
  methods: {
    // 获取图形验证码
    getCode() {
      getCode().then(res=>{
        this.uuid = res.data.uuid
        this.codeImg = 'data:image/gif;base64,' + res.data.img
      })
    },
    // 获取图形验证码-验证手机号
    handleSms() {
      const reg = /^1[3456789]\d{9}$/
      if(!reg.test(this.ruleForm.phone)) {
        return this.$message.warning({
            message: '请输入正确的手机号',
            type: 'warning'
          });
      }
      this.getCode()
      this.dialogVisible = true
    },
    // 验证码倒计时
    startTimer() {
      const interval = setInterval(() => {
        if (this.countdown > 0) {
          this.countdown--
        } else {
          clearInterval(interval)
          this.countdown = 60
        }
      }, 1000)
    },
    // 提交
    submitForm(formName) {
      let that = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          registrations(this.ruleForm).then(res=>{
            if(res.code === 200){
              that.$message({ message: '登录成功', type: 'success' })
              setTimeout(() => {
                that.$emit('change', true)
              }, 500);
            }
          })
        }
      });
    },
    // 关闭图形验证码弹窗
    handleClose() {
      this.dialogVisible = false
    },
    // 发送验证码
    submitSMS() {
      if(this.code.length <= 0) return this.$message({ message: '请输入图形验证码', type: 'warning' })
      sendSMS({
        phone: this.ruleForm.phone,
        code: this.code, uuid: this.uuid
      }).then(res => {
        if(res.code === 200) {
          this.handleClose()
          this.startTimer()
        }else {
          this.$message({
            message: res.message,
            type: 'warning'
          });
        }
      })
    }
  }
};
</script>
<style lang="scss" scoped>
.codeImg {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 90px;
  height: 40px;
  cursor: pointer;
}
.item-code {
  position: relative;
}
.item-code-text {
  position: absolute;
  right: 0;
  bottom: 8px;
  color: #3b3b3b;
  background-color: #e7e8e8;
  border-radius: 4px;
  line-height: 13px;
  padding: 10px;
  font-size: 12px;
  cursor: pointer;
}
.button {
  display: flex;
  justify-content: center;
  div {
    text-align: center;
    background: #FF7F43;
    color: #FFFFFF;
    font-size: 12px;
    border-radius: 2px;
    padding: 10px 50px;
    margin: 10px 0 0 0;
    cursor: pointer;
    &:hover {
      background: rgba(255, 127, 67,0.8);
    }
  }
}
</style>
